<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .w10{
            width: 50%;
            display: inline-block;
            margin-top: 20px;
        }
        .w10>img{
            width: 100%;
            height: 200px;
        }
    </style>
</head>
<!-- 5、正确创建前端项目；
6、通过axios请求后端接口
7、处理跨域
8、前端正确接收后端传来的数据；
9、前端根据获取的数据渲染商品列表；
10、创建仓库并使用git命令创建并切换分支提交代码  -->
<body>
    <div id="box"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    const box=document.getElementById('box')
    axios.get('http://localhost:3000/goods').then(res=>{
        res.data.forEach(item => {
            // console.log(res);
            const child=document.createElement('div')
            const span=document.createElement('span')            
            const img=document.createElement('img')            
            const p=document.createElement('p')   
            
            child.className='w10'

            img.src=item.img
            span.innerHTML=item.jg
            p.innerHTML=item.mc
            
            child.appendChild(img)
            child.appendChild(p)
            child.appendChild(span)
            // console.log(child);

            box.appendChild(child)
        });
    })
</script>
</html>